<template>
  <!--视图-->
  <div>

<!--    条件查询-->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="审批人">
        <el-input v-model="formInline.name" placeholder="审批人"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="list">查询</el-button>
      </el-form-item>
    </el-form>

<!--表格-->
    <el-table
        :data="tableData"
        style="width: 100%">
      <el-table-column
          prop="licensePlate"
          label="车牌号"
          width="180">
      </el-table-column>
      <el-table-column
          prop="make"
          label="车辆品牌"
          width="180">
      </el-table-column>
      <el-table-column
          prop="model"
          label="车辆型号"
          width="180">
      </el-table-column>
      <el-table-column
          prop="faultDate"
          label="故障发生日期"
          width="180">
      </el-table-column>
      <el-table-column
          prop="faultDescription"
          label="故障描述"
          width="180">
      </el-table-column>
      <el-table-column
          prop="faultStatus"
          label="故障状态"
          width="180">
        <template v-slot="ss">
          <div v-if="ss.row.faultStatus==1">处理中</div>
          <div v-if="ss.row.faultStatus==2">已完成</div>
        </template>
      </el-table-column>
      <el-table-column
          prop="faultPic"
          label="图片"
          width="180">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="100">
        <template v-slot="scope">
          <el-button @click="openFault(scope.row)" type="text" size="small">查看故障信息</el-button>
        </template>
      </el-table-column>
    </el-table>

<!--分页-->
    <el-pagination
        @current-change="goPage"
        :page-size="5"
        layout="total, prev, pager, next"
        :total="total">
    </el-pagination>
<!--    弹窗故障维修信息-->
    <el-dialog title="故障维修信息" :visible.sync="dialogFormVisibleFault">
      <el-form :model="formFault">
        <el-form-item label="故障部件名称" :label-width="formLabelWidth">
          <el-input v-model="formFault.componentName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="诊断结果" :label-width="formLabelWidth">
          <el-input v-model="formFault.diagnosisResult" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="使用的诊断工具" :label-width="formLabelWidth">
          <el-input v-model="formFault.diagnosticTool" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="维修描述" :label-width="formLabelWidth">
          <el-input v-model="formFault.repairDescription" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="维修费用" :label-width="formLabelWidth">
          <el-input v-model="formFault.repairCost" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleFault = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisibleFault = false">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
export default {
  name: "FaultView",
  data() {//属性
    return {
      formFault:{},
      formLabelWidth:'120px',
      dialogFormVisibleFault:false,
      formInline:{},
      tableData:[],
      total:0,
      pageNum:1,
    }
  }, methods: {//自定义方法
    openFault(res){
      console.log(res);


      console.log(this.formFault);

      this.axios.post("fault/fault/selectInformation?faultId="+res.faultId).then(res=>{

        console.log(res.data.data);
        this.formFault=res.data.data;
      })
      this.dialogFormVisibleFault=true;
    },

    goPage(res){
      this.pageNum=res;
      this.list();
    },
    list(){
    this.axios.post("fault/fault/list?pageNum="+this.pageNum).then(res=>{
      this.tableData=res.data.data.list;
      this.total=res.data.data.total;
    })
    }

  }, created() { //钩子函数
    this.list();
  }
}
</script>

<style scoped>

</style>
